<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 依赖 -->
    <script src="./dist//include-openlayers-local.js"></script>
    <script src="./lib/map.js"></script>
    <script src="https://lib.baomitu.com/jquery/3.6.0/jquery.js"></script>
    <!-- FileSaver.js实现图片的下载 -->
    <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
    <script src="https://cdn.bootcss.com/jspdf/1.3.4/jspdf.debug.js"></script>
  </head>

  <body>
    <!-- 挂载点 -->
    <button type="warning" onclick="makeMpdf()">导出PDF文件</button>
    <div class="right-aside" id="pdfDom" class="right-aside">
      <div id="map"></div>
    </div>

    <!-- <input type="button" class="ButtonLib" id="export-pdf" value="下载 " /> -->

    <script type="text/javascript">
      // 实例化
      const map = new ol.Map({
        target: "map",
        layers: [gaodeMapLayer],
        view: new ol.View({
          center: [114, 30],
          projection: "EPSG:4326",
          zoom: 8,
        }),
      })

      //   图片下载
      function makeMpdf() {
        if (confirm("您确认下载该PDF文件吗?")) {
          var pdf = new jsPDF("p", "pt", "a4")
          // 设置打印比例 越大打印越小
          pdf.internal.scaleFactor = 2
          var options = {
            pagesplit: true, //设置是否自动分页
            background: "#FFFFFF", //如果导出的pdf为黑色背景，需要将导出的html模块内容背景 设置成白色。
          }
          var printHtml = $("#pdfDom").get(0) // 页面某一个div里面的内容，通过id获取div内容
          pdf.addHTML(printHtml, 15, 15, options, function () {
            pdf.save("目标.pdf")
          })
        }
      }
    </script>
  </body>
</html>
